<template>
  <div class="app-container">
    <div class="content-wrapper">
      <span style="display: flex;">
        <el-button icon="el-icon-back" @click="$router.push('/main/biao/jixiaoxz')">返回</el-button>
      </span>
      <div class="page-header">
        <div class="header-title">
          <h2>绩效工资审批表列表</h2>
          <span class="subtitle">Performance Salary Approval List</span>
        </div>
        <div class="header-actions">
        </div>
      </div>

      <div class="search-section">
        <el-form :inline="true" :model="searchForm" class="search-form">
          <el-form-item label="姓名">
            <el-input v-model="searchForm.name" placeholder="请输入姓名" clearable></el-input>
          </el-form-item>
          <el-form-item label="工号">
            <el-input v-model="searchForm.employeeId" placeholder="请输入工号" clearable></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="search">搜索</el-button>
            <el-button icon="el-icon-refresh" @click="resetSearch">重置</el-button>
            <el-button type="primary" icon="el-icon-plus" @click="$router.push('/main/biao/jixiaoxz')">新增</el-button>
          </el-form-item>
        </el-form>
      </div>

      <div class="table-section">
        <el-table :data="tableData" border stripe highlight-current-row style="width: 100%" v-loading="loading">
          <el-table-column prop="name" label="姓名" min-width="100"></el-table-column>
          <el-table-column prop="employeeId" label="工号" min-width="100"></el-table-column>
          <el-table-column prop="department" label="部门" min-width="120"></el-table-column>
          <el-table-column prop="position" label="岗位" min-width="120"></el-table-column>
          <el-table-column prop="probationGrade" label="试用期职级" min-width="100"></el-table-column>
          <el-table-column prop="regularGrade" label="转正职级" min-width="100"></el-table-column>
          <el-table-column label="试用期工资合计" min-width="130" align="right">
            <template slot-scope="scope">
              <span class="salary-amount">¥ {{ calculateProbationTotal(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="转正工资合计" min-width="130" align="right">
            <template slot-scope="scope">
              <span class="salary-amount">¥ {{ calculateRegularTotal(scope.row) }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="280" fixed="right">
            <template slot-scope="scope">
              <el-button size="mini" type="info" icon="el-icon-view" @click="viewDetail(scope.row.id)">查看</el-button>
              <el-button size="mini" type="primary" icon="el-icon-edit" @click="handleEdit(scope.row.id)">编辑</el-button>
              <el-button size="mini" type="danger" icon="el-icon-delete"
                @click="deleteRecord(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="pagination-container">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="current"
            :page-sizes="[10, 20, 50, 100]" :page-size="size" layout="total, sizes, prev, pager, next, jumper"
            :total="total">
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getPerformanceList, deletePerformance } from '@/api/performance'

export default {
  name: 'JixiaoxzList',
  data() {
    return {
      searchForm: {
        name: '',
        employeeId: ''
      },
      tableData: [],
      current: 1,
      size: 10,
      total: 0,
      loading: false
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.loading = true;
      try {
        const response = await getPerformanceList({
          current: this.current,
          size: this.size,
          name: this.searchForm.name,
          employeeId: this.searchForm.employeeId
        });

        if (response.data) {
          this.tableData = response.data.records;
          this.total = response.data.total;
        }
      } catch (error) {
        this.$message.error('获取列表失败：' + error.message);
      } finally {
        this.loading = false;
      }
    },
    search() {
      this.current = 1;
      this.fetchData();
    },
    resetSearch() {
      this.searchForm = {
        name: '',
        employeeId: ''
      };
      this.search();
    },
    handleSizeChange(val) {
      this.size = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.current = val;
      this.fetchData();
    },
    viewDetail(id) {
      this.$router.push({
        path: '/main/biao/jixiaoxz',
        query: {
          id: id,
          type: 'view'
        }
      });
    },
    handleEdit(id) {
      this.$router.push({
        path: '/main/biao/jixiaoxz',
        query: {
          id: id,
          type: 'edit'
        }
      });
    },
    async deleteRecord(id) {
      try {
        await this.$confirm('确认删除该记录吗？删除后将无法恢复。', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        });

        await deletePerformance(id);
        this.$message.success('删除成功');
        this.fetchData();
      } catch (error) {
        if (error !== 'cancel') {
          this.$message.error('删除失败：' + error.message);
        }
      }
    },
    calculateProbationTotal(row) {
      return (
        parseFloat(row.probationPerformancePay || 0) +
        parseFloat(row.probationSeniority || 0) +
        parseFloat(row.probationSpecialAllowance || 0) +
        parseFloat(row.probationKpiBonus || 0)
      ).toFixed(2);
    },
    calculateRegularTotal(row) {
      return (
        parseFloat(row.regularPerformancePay || 0) +
        parseFloat(row.regularSeniority || 0) +
        parseFloat(row.regularSpecialAllowance || 0) +
        parseFloat(row.regularKpiBonus || 0)
      ).toFixed(2);
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  min-height: 100vh;
  background: linear-gradient(to bottom, #f8f9fa, #ffffff);
  padding: 24px;
}

.content-wrapper {
  max-width: 1400px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.05);
  padding: 24px;
}

.page-header {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid #ebeef5;

  .header-title {
    h2 {
      margin: 0;
      font-size: 24px;
      color: #2c3e50;
      font-weight: 600;
    }

    .subtitle {
      font-size: 14px;
      color: #909399;
      margin-top: 8px;
      display: block;
    }
  }

  .header-actions {
    display: flex;
    gap: 12px;

    .el-button {
      padding: 12px 20px;
      font-weight: 500;

      i {
        margin-right: 8px;
      }
    }
  }
}

.search-section {
  background: #f8f9fa;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 24px;

  .search-form {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;

    .el-form-item {
      margin-bottom: 0;
      margin-right: 0;
    }
  }
}

.table-section {
  .el-table {
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 24px;

    &::before {
      display: none;
    }

    th {
      background: #f8f9fa !important;
      color: #606266;
      font-weight: 600;
      padding: 12px 0;
    }

    td {
      padding: 12px 0;
    }
  }

  .salary-amount {
    color: #f56c6c;
    font-weight: 500;
  }
}

.pagination-container {
  display: flex;
  justify-content: flex-end;
  padding-top: 24px;
  border-top: 1px solid #ebeef5;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .app-container {
    padding: 16px;
  }

  .content-wrapper {
    padding: 16px;
  }

  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;

    .header-actions {
      width: 100%;

      .el-button {
        flex: 1;
      }
    }
  }

  .search-section {
    padding: 16px;

    .search-form {
      .el-form-item {
        width: 100%;
      }
    }
  }

  .el-table {
    .el-button {
      margin-bottom: 8px;
    }
  }
}
</style>